<template>
  <ul class="h-great-list">
    <li v-for="v in list" @click="clickLookBack(v)">
    	<img :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_187,w_330'" v-on:click.self.prevent/>
    	 <p>{{v.title}}</p>
    </li>
  </ul>
</template>
<script>
export default {
  name: "iconfont",
  props: {
    list: Array,
    pageType:String,
  },
  computed: {
    iconName() {
      return `#icon`;
    }
  },
  created(){
  },
  methods: {
    //跳转回看详情页面
    clickLookBack(v) {
    	if(this.pageType=='smallVideo'){
    		this.$router.push({
		             path: `/${this.$channel}/smallVideoPlaypage`,
		             query: {
			            videoinfo: v
			          }
		         });
    	}else{
    		this.$router.push({
             path: `/${this.$channel}/liveBack/${v.id}?dzhPage=true`
         });
         
    	}

    }
  }
};
</script>

<style scoped>
.h-great-list {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 100%;
  padding: 0 30px 20px;
  font-size: 0;
}

.h-great-list li {
  width:48%;
  margin-top: 22px;
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
  background: rgba(255, 255, 255, 1);
}

/* .h-great-list li:nth-child(even) {
  margin-left: 30px;
} */

.h-great-list li img {
  width: 100%;
  height: 187px;
  border-radius: 12px;
}
.h-great-list li p {
  width: 100%;
  margin-top: 10px;
  text-align: left;
  line-height: 40px;
 vertical-align: middle;
  font-size: 26px;
 text-align: justify;
  color: #333333;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
 
}

.h-great-list-info {
  padding: 0 10px;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-flex-align-items: center;
}

.h-great-list-info i {
  font-size: 42px;
}

.h-great-list-info span {
  color: #000;
  font-size: 26px;
   height: 42px;
  line-height: 38px;
}
</style>
